<extend name="./Public/templete/base.html" />

<block name="title">
	<title>ALL</title>
</block>

<block name="link">
	<link rel="stylesheet" href="../../../Public/source/layui/css/layui.css" />
	<style type="text/css">
		.all {
			margin-top: 2%;
		}

		.btn1 {
			margin-left: 88%;
		}

		.header {
			color: #ffffff;
			font-size: 20px;
			text-align: center;
			line-height: 50px;
			height: 50px;
			margin-top: 10px;
			background-color: #393D49;
		}
	</style>
</block>

<block name="content">
	<div class="layui-body">
		<div style="padding: 15px;">
			<div class="header">
				<b>全部人员信息</b>
			</div>
			<div class="all" style="position: relative;top:-25px;">
				<button type="button" class="layui-btn btn1" id="addfile"> 导入</button>
				<a href="{:U('User/export')}">
					<button class="layui-btn">导出</button>
				</a>
				<table id="demo" lay-filter="test" style="margin-left: 200px;"></table
			</div>
		</div>
</block>

<block name="js">
	<script type="text/javascript" src="../../../Public/source/layui/layui.js"></script>
	<script type="text/javascript" src="../../../Public/source/layui/layui.all.js"></script>
	<script type="text/javascript" src="../../../Public/source/jquery-1.11.3.js"></script>
	<script>
		layui.use(['table', 'upload'], function () {
			var table = layui.table,
				upload = layui.upload;

			var uploadInst = upload.render({
				elem: '#addfile' //绑定元素
				,
				url: '__URL__/import' //上传接口
				,
				accept: "file",
				done: function (data) {
					$('#startname').val(data.startname);
					$('#savename').val(data.savename);
				},
				error: function () {
					//请求异常回调
					alert('error');
				}
			});

			//第一个实例
			table.render({
				elem: '#demo',
				height: 500
				//  ,width:920
				,
				url: '__URL__/getmsg' //数据接口
				,
				page: true //开启分页
				,
				cols: [
					[ //表头
						{
							field: 'id',
							title: 'ID',
							sort: true,
							align: "center",
							fixed: 'left',
						}, {
							field: 'num',
							title: '学号',
							sort: true,
							align: "center"
						}, {
							field: 'name',
							title: '姓名',
							sort: true,
							align: "center"
						}, {
							field: 'sex',
							title: '性别',
							sort: true,
							align: "center"
						}, {
							field: 'group',
							title: '组别',
							sort: true,
							align: "center"
						}, {
							field: 'class',
							title: '班级',
							sort: true,
							align: "center"
						}, {
							field: 'school',
							title: '学院',
							sort: true,
							align: "center"
						}, {
							field: 'status',
							title: '权限',
							sort: true,
							align: "center"
						}, {
							fixed: 'right',
							title: '操作',
							align: 'center',
							toolbar: '#barDemo'
						}
					]
				]
			});
			//监听工具条
			table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function (index) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务端发送删除指令
						$.ajax({
							url: './deleteUser/id/' + data.id + '',
							type: 'post',
							success: function (data) {
								if (data.status == 1) {
									alert('删除成功');
								} else {
									alert(data.info);
								}
							}
						});
					});
				} else if (layEvent === 'edit') { //编辑
					//do something
					layer.open({
						title: ['修改信息'],
						type: 2,
						anim: 0,
						skin: 'layui-layer-rim', //加上边框
						area: ['450px', '70%'], //宽高
						content: './showAlterUser/id/' + data.id + ''
					});
					//同步更新缓存对应的值
					obj.update({
						username: '123',
						title: 'xxx'
					});
				}
			});

		});
	</script>
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
</block>